import clsx from "clsx";
import React from "react";

import { Header } from "./header";
import { ProjectIdFixBanner } from "./project-id-fix-banner";
import { Sidebar } from "./sidebar";

type Props = React.PropsWithChildren<{}>;

export const Layout = ({ children }: Props) => {
    return (
        <div
            id="re-devtools-ui-layout"
            className={clsx(
                "re-bg-gray-900",
                "re-flex",
                "re-flex-col",
                "re-h-full",
            )}
        >
            <Header />
            <div
                className={clsx(
                    "re-flex",
                    "re-flex-1",
                    "re-w-full",
                    "re-h-full",
                    "re-overflow-hidden",
                    "re-h-[calc(100vh-36px-8px-8px-1px)]",
                )}
            >
                <Sidebar />
                <div
                    className={clsx(
                        "re-flex-1",
                        "re-px-4",
                        "re-pt-4",
                        "md:re-px-6",
                        "md:re-pt-6",
                        "lg:re-px-8",
                        "lg:re-pt-8",
                        "re-flex",
                        "re-flex-col",
                        "re-pb-0",
                    )}
                >
                    <ProjectIdFixBanner />

                    {children}
                </div>
            </div>
        </div>
    );
};
